<template>
    <nut-tabbar unactive-color="#7d7e80" active-color="#4985F2" v-model="activeName" @tab-switch="tabSwitch" bottom
        safe-area-inset-bottom placeholder>
        <nut-tabbar-item v-for="(item, index) in List" :name="item.name" :tab-title="item.title" :icon="item.icon">
        </nut-tabbar-item>
    </nut-tabbar>
</template>

<script>
import Taro, { useRouter } from '@tarojs/taro'
import { reactive, onMounted, onLoad } from 'vue';
import { h, ref } from 'vue';
import { Home, Category, Uploader, Cart, My } from '@nutui/icons-vue-taro';
export default {
    components: { Home, Category, Uploader, Cart, My },
    setup() {
        onMounted(() => {
            const router = useRouter();
            if (router.params.name) {
                activeName.value = router.params.name
            }
        })
        const activeName = ref(Taro.getCurrentInstance().router.params.name || 'indexPage');
        const List = [
            {
                title: '首页',
                icon: h(Home),
                pagePath: 'pages/index/index',
                name: 'indexPage'
            },
            {
                title: '商城',
                icon: h(Category),
                pagePath: 'pages/shoppage/index',
                name: 'shopPage'
            },
            {
                title: '购物车',
                icon: h(Cart),
                pagePath: 'pages/cartpage/index',
                name: 'cartPage'
            },
            {
                title: '我的',
                icon: h(My),
                pagePath: 'pages/mypage/index',
                name: 'myPage'
            }
        ]
        function tabSwitch(item, index) {
            switch (index) {
                case 'indexPage':
                    Taro.redirectTo({ url: '/pages/index/index?name=indexPage' });
                    //console.log(item);
                    break;
                case 'shopPage':
                    Taro.navigateTo({ url: '/pages/shoppage/index?name=shopPage' });
                    break;
                case 'cartPage':
                    //console.log('cartPage');
                    Taro.navigateTo({ url: '/pages/cartpage/index?name=cartPage' });
                    break;
                case 'myPage':
                    Taro.redirectTo({ url: '/pages/mypage/index?name=myPage' });
                    break;
                default:
                    break;
            }
        }
        return {
            tabSwitch,
            List,
            activeName,
        };
    },
}
</script>

<style></style>